import React, {useState, useEffect} from 'react';
import loadable from '@loadable/component'
import Index from './pages/index/index';
import './App.css';
import { NavBar, Icon } from 'antd-mobile';


function App(props) {
    let hashRoute = window.location.hash.substr(1);
    const [route, setRoute] = useState(hashRoute);
    useEffect(() => {
        window.addEventListener('hashchange', () => {
            let hashName = window.location.hash.substr(1);
            console.log(hashName);
            setRoute(hashName)
        });
    })

    let Child;
    switch (route) {
        case '':
        case '/':
        case '/index':
            Child = Index;
            break;
        case '/create':
            Child = loadable(()=>import('./pages/create/index'));
            break;
        case '/edit':
            Child = loadable(()=>import('./pages/edit/index'));
            break;
        case '/detail':
            Child = loadable(()=>import('./pages/detail/index'));
            break;
        default:
            Child = loadable(() => import('./pages/NotFond'));
    }
    return (
        <div>
            <NavBar
                mode="dark"
                icon={<Icon type="left" />}
                rightContent={[
                    <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                    <Icon key="1" type="ellipsis" />,
                ]}
            >{route}</NavBar>
            <ul>
                <li><a href="#/">index</a></li>
                <li><a href="#/create">create</a></li>
                <li><a href="#/edit">edit</a></li>
                <li><a href="#/detail">detail</a></li>
                <li><a href="#/xx">404</a></li>
            </ul>
            <Child/>
        </div>
    )
}


export default App;